<template>
   <!-- 弹窗组件 -->
   <div class="dialog-box">
      <el-dialog v-model="dialogVisible" :title="title" width="500">
         <el-form ref="formRef" :model="form" label-width="100px" :rules="rules">
            <el-row :gutter="20">
               <el-col :span="24">
                  <el-form-item label="等级名称" required prop="name">
                     <el-input v-model="form.name" placeholder="请输入" />
                  </el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="编号" required prop="no">
                     <el-input v-model="form.no" placeholder="请输入" />
                  </el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="备注" required prop="note">
                     <el-input v-model="form.note" placeholder="请输入" />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="handleCancel">取消</el-button>
               <el-button color="#626aef" @click="handleSubmit">
                  确定
               </el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import api from "@/api";
import { ElMessage } from "element-plus";

const dialogVisible = ref<boolean>(false); // 弹窗控制器
const formRef = ref<any>(null); // 表单引用
const emit = defineEmits(["getSupplierList"]);

// 动态标题
const title = computed(() => {
   if(form.value.id) {
      return "编辑供应商等级";
   } else {
      return "新增供应商等级";
   }
});

// 表单数据
const form = ref<any>({
   id: 0,
   name: "",
   no: "",
   note: "",
});

// 验证规则
const rules = ref<any>({
   name: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
   no: [{ required: true, message: "请输入编号", trigger: "blur" }],
   note: [{ required: true, message: "请输入备注", trigger: "blur" }],
});

// 重置表单
const resetForm = () => {
   form.value = {
      id: 0,
      name: "",
      no: "",
      note: "",
   };
   // 清除验证状态
   if (formRef.value) {
      formRef.value.clearValidate();
   }
};

const openLoading = (item: any) => {
   dialogVisible.value = true;
   if (item) {
      // 使用深拷贝避免直接修改原始数据
      form.value = {
         id: item.id || 0,
         name: item.name || "",
         no: item.no || "",
         note: item.note || "",
      };
   } else {
      resetForm();
   }
};

// 取消操作
const handleCancel = () => {
   dialogVisible.value = false;
   resetForm();
};

const handleSubmit = async () => {
   // 验证表单
   if (!formRef.value) return;
   
   try {
      await formRef.value.validate();
      
      if (form.value.id) {
         const res = await api.supplierGrade.editSupplier({ ...form.value });
         if (res.code === 200) {
            ElMessage.success("编辑成功");
            emit("getSupplierList");
         } else {
            ElMessage.error(res.message || "编辑失败");
         }
      } else {
         const res = await api.supplierGrade.addSupplier({ ...form.value });
         if (res.code === 200) {
            ElMessage.success("新增成功");
            emit("getSupplierList");
         } else {
            ElMessage.error(res.message || "新增失败");
         }
      }
      dialogVisible.value = false;
      resetForm();
   } catch (error) {
      console.log('表单验证失败:', error);
      ElMessage.warning("请检查表单信息");
   }
};

defineExpose({
   openLoading,
});
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
   --el-dialog-padding-primary: 0px;
}

::v-deep .el-dialog__header {
   padding: 10px 16px;
   border-bottom: 1px solid #f0f0f0;
   font-weight: bold;
}

::v-deep .dialog-footer {
   padding: 10px 16px;
   border-top: 1px solid #f0f0f0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
   color: #000;
}

::v-deep .el-dialog__body {
   padding: 10px 10px;
}

:deep(.el-form-item__label) {
   justify-content: flex-start;
}

:deep(.el-form-item) {
   flex-direction: column;
   margin-bottom: 7px;
}

:deep(.el-select__wrapper) {
   background: #fafcfb;
}

:deep(.el-badge__content.is-fixed) {
   color: #666;
   border-radius: 3px;
   padding: 4px;
}

:deep(.el-table .cell) {
   display: flex;
   justify-content: center;
}

:deep(.el-button:hover) {
   color: #6860ff;
   background: #f4f5f7;
}

:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
   width: 100%;
}

:deep(.el-input__wrapper:hover) {
   box-shadow: inset 0 0 0 1px #6860ff;
}

.supply-products {
   margin-top: 20px;

   .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      font-weight: bold;

      .title-text {
         display: flex;
         align-items: center;

         .line {
            height: 17px;
            width: 2px;
            border-radius: 12px;
            margin-right: 8px;
            background-color: #6860ff;
         }
      }
   }
}

.image-list {
   display: flex;
   gap: 8px;

   .el-image {
      width: 40px;
      height: 40px;
      border-radius: 4px;
   }
}

.Paratext {
   color: #d0d0d0;
   size: 2px;
}
</style>